import { PlayCircleOutlined } from '@ant-design/icons';
import { Button, Modal, Space, Table } from 'antd';
import { fromCircle } from 'ol/geom/Polygon';
import { useState, useEffect, useRef } from 'react'
import CztApi from '../../../../../../utils/apis/CztApi';
import JzzyApi from '../../../../../../utils/apis/JzzyApi';
import ZhfxApi from '../../../../../../utils/apis/ZhfxApi';
import { createLayer, dataToFeature, drawCircle, geomToWkt, navByWkt, wktToGeom } from '../../../../../../utils/helper/mapHelper';
import useBusinessMap from '../../../../../common/BusinessMap/useBusinessMap';
import DarkCard from '../../../../../common/DarkCard';
import LittleTitle from '../../../../../common/LittleTitle';
import RadiusComponent from '../../../../../common/RadiusComponent';
import ScrollTable from '../../../../../common/ScrollTable';
import YhdApi from '../../../../../../utils/apis/YhdApi';
import { Polygon } from 'maptalks';
import { Icon, Style } from 'ol/style';
import { resourcePath } from '../../../../../../utils/resource';
import { feature, features } from 'caniuse-lite';
import VectorSource from 'ol/source/Vector';

export default function Zhyxzhfx(props) {
    const ref = useRef();
    const map = useBusinessMap();
    const [visible, setVisible] = useState();
    const [datas, setDatas] = useState();
    const [params, setParams] = useState({
        pageNum: 1,
        pageSize: 10
    });
    const [total, setTotal] = useState();
    const [selectedItem, setSelectedItem] = useState()
    const [radius, setRadius] = useState();

    useEffect(() => {
        if (visible) {
            ZhfxApi.list(params).then(resp => {
                //console.log("6",resp)
                //if(resp.rows)
                setDatas(resp.rows);
                setTotal(resp.total);

            })
        }
    }, [visible, params])

    useEffect(() => {
        let zhfxLayer;
        let duand=false;
        if (selectedItem) {
            if(selectedItem.geom){
                duand=true
            }
            if(!selectedItem.geom&&selectedItem.jd&&selectedItem.wd){
                duand=true
                selectedItem.geom=`POINT(${selectedItem.jd} ${selectedItem.wd})`
            }
            if(duand){
                const features= dataToFeature(selectedItem)
            zhfxLayer=createLayer((feature) => {
                return new Style({
                    image: new Icon({
                        src: resourcePath.iconMap[`${selectedItem?.yhlx}`]||resourcePath.iconMap[`${selectedItem?.yhlb}`],
                        scale: 0.7,
                        anchor: [0.5, 1]
                        // size: [60, 98],  
                        // scale: 1 / 24
                    })
                })
            }, [features]);
            zhfxLayer.set('type', `${selectedItem?.yhlx}`)
            zhfxLayer.set('layerName', 'icon-layer');
            map.addLayer(zhfxLayer) 
            }else{
                alert('数据缺失，无法展示')
            }
           
        }
        return () => {
            map.removeLayer(zhfxLayer)
        }
    },[selectedItem,map])

    const [wkt, setWkt] = useState();
    // console.log('selectedItem', selectedItem)
    // // const { getNewWkt } = props;
    // // getNewWkt(wkt)
    // console.log('wkt',wkt);
    const [layers, setLayers] = useState();




    return <Space direction='vertical' style={{
        width: '100%'
    }}>

        <div className='layout-h'>
            <div>隐患点：</div>
            {selectedItem ? <Button className='fill w0' type="link" size='small' onClick={e => {
                setVisible(true)
            }}>{selectedItem.yhmc}</Button> : <Button type="link" size='small' style={{
                fontStyle: "italic"
            }} onClick={e => {
                setVisible(true)
            }}>点击此处选择</Button>}
            {/* <DarkCard style={{
            width: 400,
            height: 300
        }}>
        </DarkCard> */}
            <Modal title="选择隐患点" wrapClassName="modal-main" open={visible} onCancel={e => {
                setVisible(false);
            }} width={700} bodyStyle={{
                height: 350,
                overflow: 'hidden'
            }} footer={[]}>
                <div className='layout-v wh100'>
                    <div className='fill h0' ref={ref}>
                        <ScrollTable otherHeight={72} parentNode={ref.current} columns={[{
                            dataIndex: 'yhmc',
                            title: '隐患名称'
                        }, {
                            dataIndex: 'yhlx',
                            title: '隐患类型',
                            width: 120,
                        }, {
                            width: 80,
                            render: (text, record) => {
                                return <Button type="link" size='small' onClick={e => {
                                    record.geom && navByWkt(record.geom, map);
                                    setSelectedItem(record)
                                    //console.log("7",record)
                                    setVisible(false);
                                }}>选择</Button>
                            }
                        }]} dataSource={datas}
                            pagination={{
                                current: params.pageNum,
                                pageSize: params.pageSize,
                                total,
                                onChange: (page) => {
                                    setParams(params => {
                                        return {
                                            ...params,
                                            pageNum: page
                                        }
                                    })
                                },
                                style: {
                                    margin: "8px 0"
                                }
                            }}
                            size="small"
                        />
                    </div>
                </div>
            </Modal>
        </div >

        {selectedItem && <Space className='w100' direction='vertical'>
            <LittleTitle fontSize={16} icon={false}>选择半径</LittleTitle>
            <RadiusComponent radius={radius} onChange={value => {
                setRadius(value)
            }} />
        </Space>}

        {radius && selectedItem && < div style={{
            marginTop: 16,
            textAlign: "right"
        }}>
            <Button type="primary" onClick={e => {
                if (map && radius && selectedItem) {
                    const center = wktToGeom(selectedItem.geom).getCoordinates();
                    const circle = drawCircle(map, center, radius);
                    const wkt = geomToWkt(fromCircle(circle));
                    navByWkt(wkt, map, true);
                    // setWkt(circle)
                    Promise.all([JzzyApi.listByPolygon2(wkt), CztApi.listByPolygon2(wkt), YhdApi.listByPolygon(wkt)]).then(([resp, resp2, resp3]) => {
                       // console.log('9',wkt)
                        props.onComplete?.({
                            jzzy: resp.data,
                            czt: resp2.data,
                            newWkt: circle,
                            yhd: resp3.data
                        })
                    })
                }

            }} icon={<PlayCircleOutlined />}>开始分析</Button>
        </div>
        }
    </Space >;
}